﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>array.sortOn</title>
	<style type="text/css">
		.sample
		{
			border-top: 2px solid #ddd;
		}
		
		pre
		{
			border: 1px solid #dfd;
			background-color: #f4fff4;
			padding: 2px;
			float: left;
		}
		
		.clearfix:after
		{
			content: ".";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}
	</style>
</head>
<body>
	<h2>
		Input Data</h2>
	<div class="clearfix">
		<pre>
[
  {name:"john", city:"omaha", zip:68144},
  {name:"john", city:"kansas city", zip:72345},
  {name:"bob", city:"omaha", zip:94010},
  {name:"Frank", city:"omaha", zip:90210}
]</pre>
	</div>
	<div class="sample">
		<p>
			<button type="button" id="name_sort">
				Sort</button>
			by name</p>
		<p>
			code: <code>test_data.sortOn("name");</code></p>
		<div class="clearfix">
			<pre class="output_area"></pre>
		</div>
	</div>
	<div class="sample">
		<p>
			<button type="button" id="name_i_sort">
				Sort</button>
			by name case insensitive</p>
		<p>
			code: <code>test_data.sortOn("name", Array.CASEINSENSITIVE);</code></p>
		<div class="clearfix">
			<pre class="output_area"></pre>
		</div>
	</div>
	<div class="sample">
		<p>
			<button type="button" id="name_i_d_sort">
				Sort</button>
			by name case insensitive and reverse order</p>
		<p>
			code: <code>test_data.sortOn("name", Array.CASEINSENSITIVE | Array.DESCENDING);</code></p>
		<div class="clearfix">
			<pre class="output_area"></pre>
		</div>
	</div>
	<div class="sample">
		<p>
			<button type="button" id="city_sort">
				Sort</button>
			by city</p>
		<p>
			code: <code>test_data.sortOn("city");</code></p>
		<div class="clearfix">
			<pre class="output_area"></pre>
		</div>
	</div>
	<div class="sample">
		<p>
			<button type="button" id="city_name_sort">
				Sort</button>
			by city and then by name</p>
		<p>
			code: <code>test_data.sortOn(["city", "name"]);</code></p>
		<div class="clearfix">
			<pre class="output_area"></pre>
		</div>
	</div>
	<div class="sample">
		<p>
			<button type="button" id="name_city_sort">
				Sort</button>
			by name and then by city</p>
		<p>
			code: <code>test_data.sortOn(["name", "city"]);</code></p>
		<div class="clearfix">
			<pre class="output_area"></pre>
		</div>
	</div>
	<div class="sample">
		<p>
			<button type="button" id="name_city_2_sort">
				Sort</button>
			by name and then by city, case insensitive on name, descending on city</p>
		<p>
			code: <code>test_data.sortOn(["name", "city"], [Array.CASEINSENSITIVE, Array.DESCENDING]);</code></p>
		<div class="clearfix">
			<pre class="output_area"></pre>
		</div>
	</div>
	<div class="sample">
		<p>
			<button type="button" id="zip_sort">
				Sort</button>
			by zipcode (notice that default behavior is that numbers are sorted alphabetically,
			even if they are originally a number and not a string)</p>
		<p>
			code: <code>test_data.sortOn("zip");</code></p>
		<div class="clearfix">
			<pre class="output_area"></pre>
		</div>
	</div>
	<div class="sample">
		<p>
			<button type="button" id="zip_n_sort">
				Sort</button>
			by zipcode using numerical sort</p>
		<p>
			code: <code>test_data.sortOn("zip", Array.NUMERIC);</code></p>
		<div class="clearfix">
			<pre class="output_area"></pre>
		</div>
	</div>
	<script type="text/javascript" charset="utf-8" src="../../src/loader.js"></script>
	<script type="text/javascript">		HmJS.$JSManager.$basepath = '../../src/';</script>
	<script type="text/javascript" charset="utf-8" src="../../src/demo/action/types/arraysorton.js"></script>
	<script type="text/javascript">
		var test_data;

		var prime_data = function () {
			window.test_data = [
        { name: "john", city: "omaha", zip: 68144 },
        { name: "john", city: "kansas city", zip: 72345 },
        { name: "bob", city: "omaha", zip: 94010 },
        { name: "Frank", city: "omaha", zip: 9210 }
      ];
		};
	</script>
</body>
</html>
